<template>
   <div class="integral">
      <header>
         <transition name="van-fade">
            <div class="top" v-show="visible">
               <div class="title">
                  <img src="../../../static/img/zuojiantou.png" alt="" @click="back">
                  积分商城
               </div>
               <div class="number">{{this.$store.state.userInfo.score}}</div>
               <p class="gz"><img src="../../../static/img/th.png" alt=""><span>积分兑换规则</span></p>
               <div class="btn">
                  <p @click="jump('PointsDetails')">积分明细</p>
                  <p @click="jump('PointsExchangeRecord')">积分兑换记录</p>
               </div>
            </div>
         </transition>
         <div class="bottom">
            <div v-for="(x,y) in typeList" class="abList_box" @click="type(y,x.id)">
               <p :class="y == typeIndex?'':'botTxt'">{{x.name}}</p>
               <transition name="el-zoom-in-center">
                  <p v-show="y == typeIndex"></p>
               </transition>
            </div>
         </div>
      </header>
      <transition name="van-fade">
         <div class="zw_box" v-show="visible"></div>
      </transition>
      <div class="scroll">
         <div class="empty" v-show="shopList.length<1">
            <img src="../../../static/img/shopno001.png" alt="">
            <p>暂时没有商品喔~</p>
         </div>
         <div class="allShop">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功" v-show="shopList.length>=1" >
               <van-list class="allShopItem"
                         v-model="loading"
                         :finished="finished"
                         @load="onLoad(thisId,false)"
                         finished-text="我是有底线的"
               >
                  <van-cell v-for="(x,y) in shopList" :key="y">
                     <div class="all_item" @click="goInfo('PointExchange',x.id)">
                        <img :src="$store.state.imgurlApi+x.image.split(',')[0]" alt="">
                        <div class="all_item_bot">
                           <p class="all_itemName">{{x.title}}</p>
                           <div class="item_money">
                              <p>{{x.integral}}&nbsp;积分+{{x.money}}元</p>
                              <p>已兑{{x.has_change}}件</p>
                           </div>
                        </div>
                     </div>
                  </van-cell>
               </van-list>
            </van-pull-refresh>
         </div>
      </div>
   </div>
</template>

<script>
    export default {
        name: "integral",
        data() {
            return {
                typeList: [],
                visible: true,
                shopList:[],
                loading: false,
                finished: false,
                refreshing: false,
                typeIndex:0,
                page:1, // 当前数据页
                thisId:0, // 当前展示页ID
            }
        },
        created(){
            // 请求积分商城分类接口
            this.$myAxios('index/Integral/classify','post',{}).then(res => {
                console.log(res);
                if (res.data.state == 1) {
                    this.typeList = res.data.integral;
                    this.typeList.unshift({
                        id: 0,
                        name: "全部"
                    })
                }else {
                    this.$myNotice('网络出现了点问题~',1500)
                }
            });
            this.onLoad(this.id);
        },
        mounted() {

        },
        methods: {
            onLoad(typeID = this.id,typelook = false) {
                console.log(typeID,typelook)
                if (this.refreshing) {
                    this.page = 1;
                    this.refreshing = false;
                    this.$myAxios('index/Integral/index','post',{
                        classify_id:typeID,
                        page:this.page
                    }).then(res=>{
                        if (res.data.state == '1') {
                            if(res.data.integral_goods_select.data.length < 1){
                                this.finished = true;
                            }else {
                                this.page+=1;
                            }
                            this.shopList = res.data.integral_goods_select.data;
                            this.loading = false;
                        } else {
                            // 没有数据
                        }
                        console.log(this.shopList)
                    }).catch(res=>{
                    });
                    console.log(777777777)
                    return;
                }
                this.$myAxios('index/Integral/index','post',{
                    classify_id:typeID,
                    page:this.page
                }).then(res=>{
                    console.log(res.data)
                    if (res.data.state == '1') {
                        if(res.data.integral_goods_select.data.length < 1){
                            this.finished = true;
                            return;
                        }else {
                            this.page+=1;
                        }
                        if (typelook) {
                            this.shopList = res.data.integral_goods_select.data;
                            this.page+=1;
                            console.log(88888888)
                        }else {
                            console.log(9999999,this.page)
                            var arr = res.data.integral_goods_select.data;
                            for (var i = 0; i < arr.length; i++) {
                                this.shopList.push(arr[i]);
                            }
                            this.page+=1;
                        }
                        this.loading = false;
                    } else {
                        this.shopList = [];
                        this.finished = true;
                    }
                    console.log(this.shopList)
                }).catch(res=>{
                    this.shopList = [];
                    this.finished = true;
                });
            },
            onRefresh() {
                // 清空列表数据
                this.finished = false;
                // 重新加载数据
                // 将 loading 设置为 true，表示处于加载状态
                this.loading = true;
                this.onLoad(this.thisId);
            },
            // 切换type
            type(index,id){
                if (this.typeIndex == index){return}
                $('.van-pull-refresh').scrollTop(0);
                this.typeIndex = index;
                this.thisId = id;
                this.page = 1;
                this.finished = false;
                this.onLoad(id,true);
                console.log(1010101010)
            },
            back() {
                this.$router.back();
            },
            jump(page) {
                this.$router.push({
                    name: page
                })
            },
            goInfo(page,id){
                this.$router.push({
                    name: page,
                    query:{
                        id
                    }
                })
            }
        }
    }
</script>

<style scoped>
   .integral {
      width: 100%;
      min-height: 6.67rem;
      box-sizing: border-box;
   }

   .integral > header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 999;
   }

   .zw_box {
      height: 2.45rem;
      opacity: 0;
   }

   .integral > header > .top {
      width: 100%;
      height: 2rem;
      background-image: url("../../../static/img/jfscbj.png");
      background-size: 100% 100%;
   }

   .top > .title {
      width: 100%;
      height: .5rem;
      position: relative;
      text-align: center;
      line-height: .5rem;
      color: #ffffff;
      font-size: .18rem;
      font-family: PingFang SC;
      font-weight: 500;
      margin-bottom: .05rem;
   }

   .top > .title > img {
      width: .1rem;
      height: .165rem;
      position: absolute;
      left: .1rem;
      top: calc(50% - .08rem);
   }

   .number {
      width: 100%;
      max-height: .42rem;
      line-height: .42rem;
      text-align: center;
      color: #ffffff;
      font-size: .40rem;
      font-family: PingFang SC;
      font-weight: 500;
   }

   .gz {
      width: 100%;
      height: .14rem;
      line-height: .14rem;
      text-align: center;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: center;
      margin: .17rem 0;
   }

   .gz > span {
      font-size: .12rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #FFD57C;
   }

   .gz > img {
      width: .14rem;
      height: .14rem;
      margin-right: .05rem;
   }

   .btn {
      width: 100%;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: center;
   }

   .btn > p {
      width: 1.2rem;
      height: .35rem;
      line-height: .35rem;
      color: #ffffff;
      font-size: .14rem;
      font-family: PingFang SC;
      font-weight: 500;
      text-align: center;
      border: .01rem solid rgba(255, 255, 255, 1);
      border-radius: .19rem;
   }

   .btn > p:nth-child(1) {
      margin-right: .385rem;
   }

   .bottom {
      height: .45rem;
      background-color: #ffffff;
      width: 100%;
      display: flex;
      flex-flow: row;
      align-items: center;
      overflow-y: hidden;
      overflow-x: scroll;
      display: -webkit-box;
   }
   .bottom::-webkit-scrollbar {display:none}

   .abList_box {
      height: 100%;
      letter-spacing: .02rem;
      padding: 0 .05rem;
      text-align: center;
      position: relative;
      min-width: .6rem;
   }

   .abList_box > p:nth-child(1) {
      position: relative;
      top: -.02rem;
      font-size: .14rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #F45102;
      line-height: .43rem;
   }

   .abList_box > p:nth-child(2) {
      width: 80%;
      height: .02rem;
      border-radius: .03rem;
      background-color: #F45102;
      margin: 0 auto;
      position: relative;
      top: -.05rem;
   }

   .botTxt {
      color: #333333 !important;
   }

   .allShop {
      padding: 0 .1rem;
   }

   .scroll {
      padding-top: .1rem;
   }

   .allShopTit {
      width: 100%;
      height: .1rem;
      box-sizing: border-box;
      display: flex;
      flex-flow: row;
      justify-content: space-between;
      align-items: center;
      position: relative;
      padding-right: .2rem;
   }

   .allShopTit > img {
      width: .12rem;
      height: .15rem;
      position: absolute;
      right: 0;
      top: calc(50% - .075rem);
   }

   .allShopTit > span:nth-child(1) {
      font-size: .16rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
   }

   .allShopTit > span:nth-child(2) {
      color: #B5B5B5;
      font-size: .12rem;
      font-family: PingFang SC;
      font-weight: 500;
   }

   .allShopItem {
      width: 100%;
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      align-items: center;
   }

   .all_item {
      width: 1.7rem;
      max-width: 1.7rem;
      font-size: 0;
      margin-bottom: .05rem;
   }

   .all_item > img {
      width: 100%;
      height: 1.3rem;
   }

   .all_item_bot {
      padding-left: .1rem;
      border: .01rem solid #E5E5E5;
      border-top: none;
      padding-bottom: .1rem;
      border-radius: .05rem;
      position: relative;
      top: -.03rem;
   }

   .all_itemName {
      font-size: .14rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #666666;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      height: .4rem;
      line-height: .4rem;
   }

   .item_money {
      width: 100%;
      box-sizing: border-box;
      padding-right: .05rem;
   }

   .item_money > p:nth-child(1) {
      font-size: .13rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #FF0000;
      margin-bottom: .05rem;
   }

   .item_money > p:nth-child(2) {
      font-size: .13rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: #FF7611;
   }

   .empty {
      width: 100%;
      min-height: 2rem;
      display: flex;
      flex-flow: column;
      align-items: center;
      padding-top: .2rem;
   }
   .empty>img {
      width: 1.55rem;
      height: 1.08rem;
      margin-bottom: .35rem;
   }
   .empty>p {
      font-size:15px;
      font-family:Source Han Sans CN;
      font-weight:400;
      color: #999999;
   }

   /* 列表加载适配 */
   >>> .van-cell {
      padding: 0;
      font-size: 0;
      /*line-height: 0;*/
      width: initial;
   }

   >>> .van-list__finished-text {
      width: 100%;
      font-size: .14rem;
      line-height: .5rem;
   }

   >>> .van-loading__text {
      font-size: .14rem;
      margin-left: .08rem;
   }

   >>> .van-list__loading {
      font-size: .14rem;
      line-height: .5rem;
      width: 100%;
   }

   >>> .van-loading__spinner {
      width: .16rem !important;
      height: .16rem !important;
   }
   >>> .van-cell:not(:last-child)::after {
      display: none;
   }
</style>
